<template>
	<view class="box">
		<view class="navBox">
			<fui-tabs :tabs="tabs" @change="tabChange" :current="tabIndex" :sliderBackground="'#FFDD00'"
				:selectedColor="'#000'" :size="24" :short="false" background="none" />
		</view>
		<view class="listBox">
			<swiper :current="tabIndex" :duration="300" @change="tabChange" class="swiper">
				<swiper-item class="fui-swiper__item" v-for="(res,inx) in tabs" :key="inx">
					<scroll-view scroll-y :show-scrollbar="false" class="swiper">
						<view class="" style="padding-bottom: 30rpx;">
							<view class="taskBop flex" v-for="(item,index) in 10" :key="index" @click="toDetails">
								<view class="taskImg">
									<image src="../../static/indexad/test1.jpg" mode="aspectFill"></image>
								</view>
								<view class=""
									style="display: flex;flex-direction: column;justify-content: space-between;height: 100%;">
									<view class="title">
										孙千的蓝调时刻
									</view>
									<view class="describe">
										互动任务 服饰配饰 按互动表现结算哈哈
									</view>
									<view class="money">
										<view class="">
											最高收益￥200
										</view>
									</view>
									<view class="flex time" style="justify-content: space-between;">
										<view class="">
											任务可进行2天
										</view>
										<!-- 										<view class="btn">
											立即参与
										</view> -->
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0,
				tabs: [
					'全部',
					'待通过',
					'已通过'
				],
			};
		},
		destroyed() {
			console.log('beforeDestroy');
			// this.list.map(v => {
			// 	let video = uni.createVideoContext(v.id, this);
			// 	video.seek(1);
			// 	video.pause();
			// })
		},
		methods: {
			tabChange(e) {
				if (e.name) {
					this.switchTab(e.index);
				} else {
					if (e.detail.source == 'touch') {
						let index = e.target.current || e.detail.current;
						this.switchTab(index);
					}
				}

			},
			switchTab(index) {
				if (this.tabIndex === index) return;
				this.tabIndex = index;
			},
			toDetails() {
				uni.navigateTo({
					url: '/publicPages/task/details'
				})
			},
			goDynamicDetails() {
				if (this.tabIndex != 0) {
					uni.navigateTo({
						url: '/publicPages/dynamic/details'
					});
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.listBox {
		height: calc(100vh - 100rpx);
	}

	.navBox {
		height: 100rpx;
		background-color: white;
	}

	.box {
		height: 100vh;
	}

	.swiper {
		height: 100%;
	}

	.taskBop {
		height: 240rpx;
		background-color: white;
		padding: 20rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}

	.taskImg {
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;

		image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 20rpx;
		}
	}

	.title {
		font-weight: 550;
	}

	.describe {
		font-size: 28rpx;
		color: #747172;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		word-break: break-all;
		-webkit-line-clamp: 1;
	}



	.money {
		display: flex;

		view {
			color: #DA4268;
			border-radius: 10rpx;
			padding: 5rpx 10rpx;
			border: 1rpx solid #DA4268;
			font-size: 28rpx;
		}

	}

	.time {
		font-size: 28rpx;
		color: #747172;
	}

	.btn {
		font-weight: 550;
		color: #DA4268;
		background-color: #FEF0F4;
		border-radius: 10rpx;
		padding: 10rpx;
	}
</style>